<template>
<div>
    <h1>学生表</h1>
    <table border="1" align="center" cellspacing="0">
      <tr>
        <td>id</td>
        <td>学生姓名</td>
        <td>年龄</td>
        <td>教师id</td>
        <td>操作</td>
      </tr>
      <tr v-for="i in data">
        <td>{{i.id}}</td>
        <td>{{i.name}}</td>
        <td>{{i.age}}</td>
        <td>{{i.tid}}</td>
        <td><button @click="btn2">删除</button></td>
      </tr>
    </table>

  <form action="" v-model="form" @click.prevent="btn3">
    <input type="text" v-model="form.name">
    <input type="text" v-model="form.age">
    <button type="submit">添加</button>
  </form>

</div>
</template>

<script>
export default {
  name: "students",
  data(){
    return{
      data:"",
      id:this.$route.query.id,
      form:{}
    }
  },
  methods:{
    btn(){
      this.axios.get('stu/').then(
        res=>{
          this.data=res.data
          console.log(res)
        }
      )
    },
    btn2(){
      this.axios.delete('stu/?id='+this.id).then(res=>{
        console.log(res)
        this.btn()
      })
    },
    btn3(){
      this.axios.post('stu/',this.from).then(res=>{
        console.log(res)
        this.btn()
      })
    }
  },
  mounted() {
    this.btn()
  }
}
</script>

<style scoped>

</style>

